<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/tutorial.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/dom-utils.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/canvas-extentions.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/shape.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/line.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/responsive-line.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/rect.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/responsive-rect.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/image.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/circle.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/arrow.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/text.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/irregular-shape.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/responsive-irregular-shape.js"></script>
	
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/scene.js"></script>
	
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/animation.js"></script>
	<script type="text/javascript" src="./Scripts/CanvasLib/2D/draggable.js"></script>
	
	<script type="text/javascript" src="./Scripts/CanvasLib/scene.js"></script>
	<!-- END MOSHU'S -->
	
	<!-- INCLUDE SNAKE'S LIBRARY-->
	<script type="text/javascript" src="./Scripts/SceneEditor/Painters/painter.js"></script>
	<script type="text/javascript" src="./Scripts/SceneEditor/Painters/irregular-shape-painter.js"></script>
	<script type="text/javascript" src="./Scripts/SceneEditor/json3.js"></script>
	<script type="text/javascript" src="./Scripts/SceneEditor/sceneEditor.js"></script>
	<script type="text/javascript" src="./egg-catcher/egg-catcher.js"></script>
	<!-- END SNAKE'S -->
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library - Egg Catcher</span>		
			</div>		
			<div class="menu"></div>			
		</div>
		<div class="page-content" style="overflow-y:scroll;">
			<div style="width:70%;margin-left:15%;margin-top:1%;margin-bottom:1%;text-align:center;height:600px;" id="container">
				<canvas width="500" height="500" id="scene" style="border:2px solid black;"></canvas>
				<br>				
			</div>
			<div style="width:70%;margin-left:15%;margin-top:1%;margin-bottom:1%;text-align:center;height:50px;line-height:20px;" id="report">
                <b>Try to catch all eggs, by moving Mary left and right, using the arrow keys.<br />
                Note : You can also hold click on Mary and drag her arround to catch the eggs, if that feels more fun. <br />
                Note: The more eggs you catch, the faster they drop.<br /></b><br />
				Caught: <span id="lblCaughtEggs" style="color:blue; font-size:2em">0</span>&nbsp;&nbsp;&nbsp;
				Missed: <span id="lblMissedEggs" style="color:red;font-size:2em">0</span><br /><br /><br />
                <div style="text-align:left;">
                    <b>Tech details:<br /></b>
                    - relies on Moshu's lib<br />
                    - overlapping canvases<br />
                    - moving objects (Mary, eggs, random clouds moving in the sky)<br />
                    - key actions capturing <br />
                    - work : 3h (it is a little much, but I had do so some basic image editing too, like cutting the clouds, adding a basket to Mary, find an egg, cut the background from another image)<br />
                    - 2d object collisions<br /><br /><br />
                </div>
			</div>
		</div>
	</div>
	
	<div class="page-footer">
	</div>
	<script type="text/javascript">
		$( ".menu" ).load( "./partials/menu.html" );
		$( ".page-footer" ).load( "./partials/footer.html" );
		$(".resizable").resizable();
	</script>

<script type="text/javascript">
		//var scene = new Scene("scene");				
		var game = new EggCatcher("container");

		game.onEggMissed = function(){
			$("#lblMissedEggs").html(game.missedEggs);
		};
		game.onEggCaught = function(){
			$("#lblCaughtEggs").html(game.caughtEggs);
		};
		//debugger;
</script>
</body>
</html>